<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="./framework/font-awesome-4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="./framework/reset.css">
		<link rel="stylesheet" href="./framework/common.css">
		<link rel="stylesheet" href="./css/feedbackInfo.css">
		<title>东软环保公众监督系统-网格员端</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<!-- 总容器 -->
		<div class="wrapper">
			<div class="header-box">
				<header>
					<i class="fa fa-angle-left" onclick="history.go(-1)"></i>
					<p>反馈任务详细信息</p>
					<i></i>
				</header>
				<div class="top-ban"></div>
				<img src="./img/header.png">
			</div>

			<table border="1" class="info">
				<tr>
					<td>反馈用户</td>
					<td id="realNameInfo">诸葛亮 13565898564</td>
				</tr>
				<tr>
					<td>网格</td>
					<td id="prinvinceInfo">辽宁省 沈阳市</td>
				</tr>
				<tr>
					<td>详细地址</td>
					<td id="address">和平区解放路123号</td>
				</tr>
				<tr>
					<td>预估等级</td>
					<td id="aqiInfo">四级 中度污染</td>
				</tr>
				<tr>
					<td>信息描述</td>
					<td id="information">空气浑浊，呼吸不畅</td>
				</tr>
			</table>

			<div class="actual">
				<table>
					<tr>
						<td>SO2浓度</td>
						<td><input id="so2" onchange="onSo2Change();" type="text" placeholder="请输入SO2浓度"></td>
						<td>ug/m3</td>
						<td>
							<p id="so2Info" style="background-color: white;"></p>
						</td>
					</tr>
					<tr>
						<td>CO浓度</td>
						<td><input id="co" onchange="onCoChange();" type="text" placeholder="请输入CO浓度"></td>
						<td>ug/m3</td>
						<td>
							<p id="coInfo" style="background-color: white;"></p>
						</td>
					</tr>
					<tr>
						<td>PM2.5</td>
						<td><input id="spm" onchange="onSpmChange();" type="text" placeholder="请输入PM2.5浓度"></td>
						<td>ug/m3</td>
						<td>
							<p id="spmInfo" style="background-color: white;"></p>
						</td>
					</tr>
				</table>
				<h3 id="aqiShow">实测AQI等级：暂无数据</h3>
				<div class="btn" onclick="add();">提交实测数据</div>
			</div>

			<footer>
				<img src="./img/bottom.png">
			</footer>
		</div>
	</body>
</html>
<script>
	let token = localStorage.getItem("token");
	// 创建请求配置对象
	const config = {
		headers: {
			'token': token, // 设置认证令牌
			'Content-Type': 'application/json' // 设置内容类型为JSON
		}
	};
	let afId = localStorage.getItem("afId");

	function loadData() {
		let url = "http://localhost:8080/aqi/detail?afId=" + afId;
		axios.get(url, config).then((r) => {
			if (r.data.ok) {
				let feedbackInfo = r.data.data.feedback;
				document.getElementById("realNameInfo").innerHTML = feedbackInfo.realName + " " + feedbackInfo
					.telId;
				document.getElementById("prinvinceInfo").innerHTML = feedbackInfo.provinceName + " " + feedbackInfo
					.cityName;
				document.getElementById("address").innerHTML = feedbackInfo.address + ""
				document.getElementById("aqiInfo").innerHTML = feedbackInfo.chineseExplain + " " + feedbackInfo
					.aqiExplain;
				document.getElementById("information").innerHTML = feedbackInfo.information + "";
			}
		})
	}
	loadData();
	let so2Level = 0;
	let coLevel = 0;
	let spmLevel = 0;
	let maxLevel = 0;
	let so2Aqi = null;
	let coAqi = null;
	let spmAqi = null;

	function onSo2Change() {
		let value = document.getElementById("so2").value;
		let url = "http://localhost:8080/aqiMap/aqiDetail?type=1&value=" + value;
		axios.get(url, config).then((r) => {
			if (r.data.ok) {
				so2Aqi = r.data.data.aqi;
				document.getElementById("so2Info").innerHTML = so2Aqi.chineseExplain;
				document.getElementById("so2Info").style.backgroundColor = so2Aqi.color;
				so2Level = so2Aqi.aqiId;
				change();
			}
		})
	}

	function onCoChange() {
		let value = document.getElementById("co").value;
		let url = "http://localhost:8080/aqiMap/aqiDetail?type=2&value=" + value;
		axios.get(url, config).then((r) => {
			if (r.data.ok) {
				coAqi = r.data.data.aqi;
				document.getElementById("coInfo").innerHTML = coAqi.chineseExplain;
				document.getElementById("coInfo").style.backgroundColor = coAqi.color;
				coLevel = coAqi.aqiId;
				change();
			}
		})
	}

	function onSpmChange() {
		let value = document.getElementById("spm").value;
		let url = "http://localhost:8080/aqiMap/aqiDetail?type=3&value=" + value;
		axios.get(url, config).then((r) => {
			if (r.data.ok) {
				spmAqi = r.data.data.aqi;
				document.getElementById("spmInfo").innerHTML = spmAqi.chineseExplain;
				document.getElementById("spmInfo").style.backgroundColor = spmAqi.color;
				spmLevel = spmAqi.aqiId;
				change();
			}
		})
	}

	function change() {
		if (so2Level > coLevel) {
			if (so2Level > spmLevel) {
				// so2大
				maxLevel = so2Level;
				document.getElementById("aqiShow").innerHTML = "实测AQI等级：" + so2Aqi.chineseExplain + "级 " + so2Aqi
					.aqiExplain;
				document.getElementById("aqiShow").style.backgroundColor = so2Aqi.color;
			} else {
				// spm大
				maxLevel = spmLevel;
				document.getElementById("aqiShow").innerHTML = "实测AQI等级：" + spmAqi.chineseExplain + "级 " + spmAqi
					.aqiExplain;
				document.getElementById("aqiShow").style.backgroundColor = spmAqi.color;
			}
		} else {
			if (coLevel > spmLevel) {
				//co大
				maxLevel = coLevel;
				document.getElementById("aqiShow").innerHTML = "实测AQI等级：" + coAqi.chineseExplain + "级 " + coAqi.aqiExplain;
				document.getElementById("aqiShow").style.backgroundColor = coAqi.color;
			} else {
				//spm大
				maxLevel = spmLevel;
				document.getElementById("aqiShow").innerHTML = "实测AQI等级：" + spmAqi.chineseExplain + "级 " + spmAqi
					.aqiExplain;
				document.getElementById("aqiShow").style.backgroundColor = spmAqi.color;
			}
		}
	}

	function add() {
		let so2Value = document.getElementById("so2").value;
		let coValue = document.getElementById("co").value;
		let spmValue = document.getElementById("spm").value;
		let url = "http://localhost:8080/aqi/updateInfo";
		axios.put(url, {
			afId: afId,
			so2Level: so2Level,
			so2Value: so2Value,
			coLevel: coLevel,
			coValue: coValue,
			spmLevel: spmLevel,
			spmValue: spmValue,
			aqiId: maxLevel
		}, config).then((r) => {
			if (r.data.ok) {
				alert("提交成功！");
				location.href = "feedbackList.html";
			} else {
				alert("提交失败");
			}
		})
	}
</script>